<template>
  <div class="normal_events">
       <div class="event_deal_box">
          <div @click="ToDetail(item.id)" class="event_deal_list" v-for="item in list">
                <!--<div class="top">-->
                  <!--<div class="left">-->
                    <!--<span class="left_type">事件类型&emsp;:</span>-->
                    <!--<span class="left_content">{{item.cat_name}}</span>-->
                  <!--</div>-->
                  <!--<div class="right">-->
                       <!--<span class="yes" v-if="item.status == 1">已解决</span>-->
                       <!--<span class="no" v-if="item.status == 2">未解决</span>-->
                       <!--<span class="no" v-if="item.status == 0">待解决</span>-->
                  <!--</div>-->
                <!--</div>-->
                <div class="centers">
                  <div class="left">
                      <div class="left_left">
                          <span class="left_types">事件类型:</span>
                          <span class="left_contents">{{item.cat_name}}</span>
                      </div>
                      <div class="right_right">
                          <span class="left_types">当事人:</span>
                          <span class="left_contents">{{item.u_name}}</span>
                         <!--<span class="left_type">事件当事人:</span>-->
                        <!--<span class="left_content">{{item.u_name}}</span>-->
                     </div>

                  </div>
                  <div class="right">
                          <span class="yes" v-if="item.status == 1">已解决</span>
                       <span class="no" v-if="item.status == 2">未解决</span>
                       <span class="no" v-if="item.status == 0">待解决</span>
                  </div>
                </div>

                <div class="bottom">
                  <div class="left">
                    <span class="left_type">事件内容&emsp;:</span>
                    <span class="left_content">{{item.content}}</span>
                  </div>
                  <div class="right">
                     <span>{{item.time_at}}</span>
                  </div>

                </div>
          </div>

       </div>

    <!--未开发时候显示-->
    <p v-if="list.length==0" style="font-size: 60px;color: #cccccc;position: absolute;left: 50%;top:40%;transform:translateY(-50);transform:translateX(-50%)">暂无数据</p>
    <!--未开发时候显示-->
  </div>
</template>

<script>
    export default {
        name: "normalEvents",
        data(){
          return{
            list: []
          }
        },
        created(){
          console.log('普通事件的路由！：',this.$route.query);
          if (this.$route.query.childdata) {
            this.$emit('childData',0);
          }else {
            this.$emit('childData', this.$route.query.eventative);
          }

        },


        mounted() {
          this.getData();

        },

        methods:{

          ToDetail(id){
            let that = this;
            console.log('点击去往详情页面！');
            console.log(id);
            that.$router.push({
              path:"/event_detail_appeal",
              query:{id:id,pid:that.$route.query.ppid}
            });
          },

          getData(){

            let that = this;
            that.$http.get("api/GriderPcApi/getOrdinaryEventList?vollege_id=" + that.$util.vollege_id + "&limit=100000", null, r=>{
              console.log("普通事件", r);
              that.list = that.list.concat(r.data.data);
            });

          }

        }

    }
</script>

<style scoped>

  .normal_events{
    height: 700px;
    width: 100%;
    box-sizing: border-box;
    padding-top: 60px;
    padding-left: 60px;
    padding-right: 60px;
  }
  .event_deal_box{
    height: 100%;
    width: 100%;
    overflow-y: scroll;
  }
  .event_deal_list{
    height: 110px;
    width: 100%;
    border-bottom: 3px solid #f9f9f9;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
  }
  .top{
    flex: 1;
    display: flex;
  }
  .left{
    flex: 8;
    display: flex;
    align-items: center;
  }
  .left_left{
    flex: 1;
    /*background: blue;*/
    display: flex;
    align-items: center;
  }
  .left_types{
    font-size: 24px;
    color: #8b8c8b;
  }
  .left_contents{
    font-size: 24px;
    color: black;
    padding-left: 35px;

  }
  .right_right{
    flex: 1;
    /*background: red;*/
    display: flex;
    align-items: center;

  }
  .left_type{
    font-size: 24px;
    color: #8b8c8b;
  }
  .left_content{
    font-size: 24px;
    color: black;
    padding-left: 10px;

    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 900px;
  }
  .right{
    flex: 1;
    font-size: 24px;
    display: flex;
    align-items: center;
  }
  .centers{
    flex: 1;
    display: flex;
  }
  .bottom{
    flex: 1;
    display: flex;
  }
  .yes{
    color: #29be74;
  }
  .no{
    color: #f10008;

  }


</style>
